Flex Container properties
We will read now various properties of Flex Container.
FLEX-direction
As we had seen earlier, the default direction is from left to right and the line is along the Main axis. However, the writing mode can be changed using the following values:
- flex-direction: row-reverse;: This will swap the Main start and Main The direction will be along the Main axis but the direction will be from right to left.
- flex-direction: column;: This will swap the Main axis and the Cross axis, following which the direction that the Flex Items are set will be vertical in nature.
- flex- direction: column-reverse;: This will be the same as column but the items will be laid from bottom to top
Example
<html>
<head>
<style>
#flex-container { display: -webkit-flex; display: flex;
-webkit-flex-direction: column-reverse; flex-direction: column-reverse;
width: 390px; height: 300px;
background-color: Navy;
}
#flex-item {
background-color: Silver; width: 150px;
height: 110px; margin: 15px;
}
</style>
</head>
<body>
<div id="flex-container">
<div id="flex-item">ASP.NET</div>
<div id="flex-item">PHP5</div>
</div>
</body>
</html>
OUTPUT
We can see that the Main axis and the Cross axis have been swapped and the reverse value has changed the mode from bottom to top.
justify-content
We can change the position of Flex Items along the Main axis using this property. The different values for this property are as follows:
- justify-content: center;: This will position the Flex Items at the center along the Main
The other values that can be assigned are:
- justify-content: flex-start;
- justify-content: flex-end;
- justify-content: space-between;
- justify-content: space-around;
space-between and space-around deal with the whitespace whereas the flex-start and flex-end will change the position from the start or the end depending on the direction.
Let's look at the following code snippet where we have used the justify-content: flex-end; value:
<html>
<head>
<style>
#flex-container { display: -webkit-flex; display: flex;
-webkit-justify-content: flex-end; justify-content: flex-end;
width: 500px; height: 200px;
background-color: blue;
}
#flex-item {
background-color: Silver; width: 150px;
height: 130px;
margin: 10px;
}
</style>
</head>
<body>
<div id="flex-container">
<div id="flex-item">ASP.NET</div>
<div id="flex-item">PHP5</div>
</div>
</body>
</html>
OUTPUT
We can see that the position of the items has been inclined to the right as a result of the flex-end value.
align-items
While justify-content aligned the items along the Main axis, align-items will align the items along the Cross axis. This property has the following values:
- align-items: center;
- align-items: flex-start;
- align-items: flex-end;
- align-items: baseline;
- align-items: stretch;
The align-items property will align the items along the center, the start, or the end of the Cross axis as deined whereas the baseline value will align it along the baseline while the stretch value as the name suggests will stretch the items from the start of the Cross axis to the end of it.
EXAMPLE
<html>
<head>
<style>
#flex-container { display: -webkit-flex; display: flex;
-webkit-align-items: center; align-items: center;
width: 330px; height: 370px;
background-color: blue;
}
#flex-item {
background-color: Silver; width: 110px;
height: 150px; margin: 25px;
}
</style>
</head>
<body>
<div id="flex-container">
<div id="flex-item">ASP.NET</div>
<div id="flex-item">PHP5</div>
</div>
</body>
</html>
OUTPUT
As we can see, the items are positioned on the center of the Cross axis.
Flex-wrap
At times, there are too many Flex Items and they will not it in on a single Flex Line. Here the wrap feature comes into play. Using this property, additional Flex Lines are created on the Cross axis to accommodate these Flex Items.
<html>
<head>
<style>
#flex-container { display: -webkit-flex; display: flex;
-webkit-flex-wrap: wrap; flex-wrap: wrap;
width: 300px; height: 240px;
background-color: BLUE;
}
#flex-item {
background-color: Silver; width: 100px;
height: 70px; margin: 10px;
}
</style>
</head>
<body>
<div id="flex-container">
<div id="flex-item">ASP</div>
<div id="flex-item">PHP</div>
<div id="flex-item">JAVA</div>
</div>
</body>
</html>
OUTPUT
As we can see, the JAVA item is accommodated on a different Flex Line due to the
wrap feature.
The wrap-reverse property is a contrast of the wrap property. Let's look at the following code to understand the difference:
<html>
<head>
<style>
#flex-container { display: -webkit-flex; display: flex;
-webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse;
width: 300px; height: 240px;
background-color: BLUE;
}
#flex-item {
background-color: Silver; width: 100px;
height: 70px; margin: 10px;
}
</style>
</head>
<body>
<div id="flex-container">
<div id="flex-item">ASP</div>
<div id="flex-item">PHP</div>
<div id="flex-item">JAVA</div>
</div>
</body>
</html>
OUTPUT
Order
This feature displays the items in a particular hierarchy determined by the order value assigned to them. For example, if we assign a value of -1 to a Flex Item, it will be displayed before any other Flex Item irrespective of the order in the document.
<html>
<head>
<style>
.flex-container { display: -webkit-flex; display: flex;
-webkit-flex-wrap: wrap; flex-wrap: wrap;
-webkit-align-content: center; align-content: center;
width: 300px; height: 240px;
background-color: Blue;
}
.flex-item {
background-color: Yellow; width: 100px;
height: 100px; margin: 5px;
}
.point{
-webkit-order: -1;
order: -1;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item"> ASP </div>
<div class="flex-item point"> PHP </div>
<div class="flex-item"> JAVA </div>
</div>
</body>
</html>
OUTPUT
Flex
The flex property is an imperative part of the CSS3 Flexbox model.
Let's look at an example to understand the concept. Suppose we have three Flex Items: Box One, Box Two, and Box Three. The space on the Main axis has to be distributed among the three items. Suppose we want the items to ill up the space in the ratio 1:3:5. How do we do it? Here is where the flex property comes into play.
Let's look at the following code example to see how it works:
<html>
<head>
<title>
The " flex " property
</title>
<style>
.flex-container { display: -webkit-flex; display: flex;
width: 700px; height: 300px;
background-color: DeepSkyBlue;
}
.flex-item {
background-color: Yellow; margin: 15px;
}
.first_item {
-webkit-flex: 1;
flex: 1;
}
.second_item {
-webkit-flex: 3;
flex: 3;
}
.third_item {
-webkit-flex: 5;
flex: 5;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item first_item"> Box One </div>
<div class="flex-item second_item"> Box Two </div>
<div class="flex-item third_item"> Box Three </div>
</div>
</body>
</html>
OUTPUT
We can see that the space on the Main axis has been distributed in the ratio 1:3:5.